<script>
	import { onMount } from 'svelte';

	import anime from 'animejs';
	import {
		initRender,
		initScene,
		initCamera,
		// initgui,
		initLight,
		initModel,
		animate,
		onWindowResize,
		mesh,
		camera,
		renderer,
		beforeDestroy
	} from '$lib/webgl/ts/gl';
	let el;
	onMount(() => {
		// if (!Detector.webgl) Detector.addGetWebGLMessage()

		initRender(el);
		initScene();
		initCamera();
		initLight();
		initModel();
		// initControls();
		// initStats()
		animate();
		// initgui();
		renderer;
		// window.onresize = onWindowResize;
	});

	function move() {
		let animetime = anime.timeline({
			easing: 'easeOutElastic(1.5,.3)',
			duration: 1500,
			direction: 'alternate'
			// loop: true
			//  targets: mesh
		});
		animetime
			// .add({
			//   targets: mesh.material,
			//   opacity: 1,
			// })
			.add(
				{
					targets: mesh.rotation,
					change: function () {
						mesh.rotation.y += 0.01;
						// mesh.rotation.z += 0.1
						// mesh.rotation.x += 0.1
					}
				},
				0
			)
			.add({
				targets: mesh.scale,
				x: 1.5,
				y: 1.5,
				z: 1.2
			})

			.add(
				{
					targets: mesh.material.color,
					b: 0.33,
					g: 1,
					r: 0.33
				},
				0
			)
			.add(
				{
					targets: mesh.position,
					z: 6,
					x: 2
				},
				'-=600'
			)
			.add(
				{
					targets: mesh.position,
					x: -1,
					y: -2
				},
				600
			)
			.add(
				{
					targets: mesh.material,
					opacity: 0.2
				},
				'-=600'
			);
		// mesh.rotation.z += 0.01
	}
	function camemove() {
		let animetime = anime.timeline({
			easing: 'easeOutElastic(1.5,.3)',
			direction: 'alternate',
			duration: 3000
		});
		animetime
			.add({
				targets: camera.position,
				x: 5,
				y: 1,
				z: 2,
				duration: 2000
			})
			.add({
				targets: mesh.scale,
				x: 1.5,
				y: 1.5,
				z: 1.2
			})
			.add({
				targets: mesh.position,
				z: 10,
				x: 20
			})
			.add(
				{
					targets: mesh.position,
					x: -5,
					y: -2
				},
				'-=300'
			);
	}
</script>

<svelte:window on:resize={onWindowResize} />

<canvas bind:this={el} />
